import React from 'react'
import "@/assets/css/memoire.scss"
import { useSelector } from 'react-redux'
import dayjs from "dayjs"
import HeadBack from "@/components/HeadBack"


export default function Messages() {

    const messages = useSelector((state) => state.MsgReducer.messages);


    return (
        <div className='memContainer'>
            <HeadBack background={"#FFFFFF"} backTit={""}  isHome="back"></HeadBack>

            <div className='memUl msgUl'>

                {/* 每一列消息 */}
                {
                    messages.map((item, index) => (
                        <div className='memLi' key={index}>
                            <div className='memLiTit'>用药提醒</div>
                            <div className='memLiTxt'>您的用药时间到了，请及时服用{item.drugs}</div>
                            <div className='memLiDate memLiTxt'>{dayjs(item.time).format("YYYY年MM月DD日 HH:mm")}</div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

